<template>
  <el-form :model="form" label-width="120px">
    <el-tabs type="border-card" class="demo-tabs">
      <el-tab-pane>
        <template #label>
          <span class="custom-tabs-label">
            <el-icon><calendar /></el-icon>
            <span>基础</span>
          </span>
        </template> 

           <JmInput  jmname="标题" v-model="form.cate_name"   type="text"  ></JmInput>
           <JmInput  jmname="别名" v-model="form.alias_name"   type="text"  ></JmInput>
            <JmInput  jmname="唯一标识" v-model="form.guid"   type="text"  ></JmInput>
 
           <JmEnum jmname="导航" v-model="form.is_nav" :jv="{1: '是', 0: '否'}" jtype="2"  ></JmEnum>
           <JmEnum jmname="父栏目" v-model="form.parent_id" :jv="parent" jtype="4"  ></JmEnum>
            <JmEnum jmname="栏目类型" v-model="form.cate_model" :jv="{1:'单页',2:'文章',3:'图文'}" jtype="3"  ></JmEnum>
            <JmEnum jmname="显示" v-model="form.is_show" :jv="{1: '正常', 0: '禁用'}" jtype="2"  ></JmEnum>

<!-- 
  cate_icon
  cate_link 
parent_path
create_time
update_time
delete_time  
palette_color
is_defined  --> 

      </el-tab-pane>



      <el-tab-pane label="图片">
       
           <JmInput type="img" jmname="缩略图" v-model="form.cate_img"></JmInput> 
           <JmInput type="img" jmname="文章大图" v-model="form.cate_img_big"></JmInput>  
  
      </el-tab-pane>

      <el-tab-pane label="seo">
        <JmInput
          jmname="seo标题"
          v-model="form.seo"  
        ></JmInput>

        <JmInput
          jmname="关键词"
          v-model="form.keywords" 
          type="textarea"
        ></JmInput>

        <JmInput
          jmname="seo描述"
          v-model="form.description" 
          type="textarea"
        ></JmInput>
  
      </el-tab-pane>
      
      
      <el-tab-pane label="内容">
         
            <JmInput type="textarea" jmname="简介" v-model="form.introduce"></JmInput>
            <JmInput type="textarea" jmname="内容" v-model="form.content"></JmInput>
  
      </el-tab-pane>
      
   

      <el-form-item>
        <el-button type="primary" @click="onSubmit">Create</el-button> 
      </el-form-item>
    </el-tabs>
  </el-form>
</template>
 
<script>
import JmInput from "../../../components/form/JmInput.vue";
import JmEnum from "../../../components/form/JmEnum.vue";
export default {
  components: { JmInput, JmEnum },
  data() {
    return {
      form: {     
            cate_name: "",
            alias_name: "",
            guid: "",
            cate_img: "",
            cate_link: "",
            parent_id: "", 
            cate_model: 1,
            content: "",
            seo: "",
            keywords: "",
            description: "", 
            is_show: 1,
            palette_color: "",
            is_defined: "",
            cate_icon: "",
            introduce: "",
            cate_img_big: "",
            is_nav: 1,
 
      },
      parent:{1: "首页"},
    };
  },

  mounted() {
    this.getDataList();
  },
  methods: {
    // 配置信息列表初始化
    async getDataList() {
      try { 
          const res = await this.$api.Cate({select:1}); 
          let ccc={}; 
          res.rows.forEach(element => { 
                ccc[element.id]=element.prefix+element.cate_name;
          }); 
          console.log(ccc,"查询")
          this.parent=ccc; 
      } catch (error) {
        /*console.error(error);*/
      }
    },
    onSubmit() {
      //  console.log(this.form);
      const res = this.$api.addCate(this.form);

       this.$parent.$parent.$parent.$parent.handleClose();
      console.log(res);
    },
  },
};
</script>
<style>
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
.demo-tabs .custom-tabs-label .el-icon {
  vertical-align: middle;
}
.demo-tabs .custom-tabs-label span {
  vertical-align: middle;
  margin-left: 4px;
}
</style>